<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>{{site.name}}-{{site.title}}</title>
    {{include './common/meta.html'}}
<body class="bg-f8f8f8">
      <!-- 头部 -->
    {{include './common/header.html'}}


    <!-- 头条文章 -->
    <main class="bg-f2f2f2 pt-10 pb-20 row">

        <div class="main center mt-10 row gap-20">
            <!-- 最新文章 -->
            <article class="flex-1">
                <div class="bg-fff radius-6 pd-15 mb-1 f-14 c-999">
                    <i class="ico-20 ico-home pos-r t-3"></i> 
                    <a class="" href="/" >首页</a> /
                    {{each position}}
                        {{if $index < position.length-1}}
                        <a  href="{{$value.path}}/index.html" >{{$value.name}}</a> /
                        {{else}}
                        <a class="c-666" href="{{$value.path}}/index.html" >{{$value.name}}</a>
                        {{/if}}
                    {{/each}}
                </div>
                <div class="bg-fff radius-6 pd-25">
                    <header class="border-b pos-r">
                        <h2 class="f-26 c-252933  bold mt-10">{{article.title}}</h2>
                        <p class="f-12 mt-5 mb-26">
                            
                            <span class="c-999 ">
                                <i class="ico-20 ico-time pos-r t-4"></i> {{article.updatedAt}}
                                <i class="ico-20 ico-admin pos-r t-4 ml-4"></i> {{article.author}}
                                <i class="ico-20 ico-view pos-r t-5 ml-4"></i> 阅读（{{article.pv}}）
                                <!-- <i class="ico-20 ico-zan pos-r t-4 ml-4"></i>点赞（95） -->
                            </span>

                            {{each article.tags}}
                            <a class="el-tag mr-5 mb-5" href="/tags/{{$value.path}}.html" title="{{$value.name}}">{{$value.name}}</a>
                            {{/each}}
                        </p>
                    </header>

                    {{if article.description}}
                    <section class="introduction pd-10 border-6 mb-20 mt-20 lh-25 f-14 bg-f2f2f2">
                        「导读」{{@ article.description}}
                    </section>
                    {{/if}}
                    <article id="article" class="article-cont f-17 lh-35">
                       {{@ article.content}}
                    </article>

                </div>

                <footer class="pd-25 bg-fff radius-6 mt-1 f-14 c-333">
                    <p>上一篇：
                        {{if pre}}
                        <a href="{{pre.path}}/article-{{pre.id}}.html" class="c-666" >
                            {{pre.title}}
                        </a>
                        {{else}}
                        真的没有了
                        {{/if}}
                    </p>
                    <p class="mt-14">下一篇：
                        {{if next}}
                        <a href="{{next.path}}/article-{{next.id}}.html" class="c-666" >
                            {{next.title}}
                        </a>
                        {{else}}
                        真的没有了
                        {{/if}}
                    </p>
                </footer>

            </article>

        </div>
    </main>


   <!-- footer -->
   {{include './common/footer.html'}}

    
   <div class="api mb-20 mt-20 pd-20 bg-f2f2f2">
       <h1>接口页面--全局数据：</h1>
       <p class="mb-20">site-> {{site}} </p>
       <p class="mb-20">111-->{{site.json.siteSubtitle}}</p>
       <p class="mb-20">nav-> {{nav}} </p>
       <p class="mb-20">category-> {{category}}</p>
       <p class="mb-20">friendlink-> {{friendlink}}</p>
       <p class="mb-20">base_url-> {{base_url}}</p>
       <p class="mb-20">frag--->{{frag}}</p>
       <p class="mb-20">tag--->{{tag}}</p>

       <p class="mb-20">-----------</p>
       <p class="mb-20">position------>{{position}}</p>
       <p class="mb-20">navSub------>{{navSub}}</p>
       <p class="mb-20">article------>{{article}}</p>

       <p class="mb-20 bg-fff">article.tags------>{{article.tags}}</p>


       <p class="mb-20">news------>{{news}}</p>
       <p class="mb-20">hot------>{{hot}}</p>
       <p class="mb-20">imgs------>{{imgs}}</p>
       <p class="mb-20">pre------>{{pre}}</p>
       <p class="mb-20">next------>{{next}}</p>
      
   </div>

    <div id="app">
        <el-drawer v-model="drawer" :show-close="false" :with-header="false" :before-close="handleClose">
            {{include './common/wap-nav.html'}}
        </el-drawer>
        <el-backtop :right="100" :bottom="100" />
    </div>

    {{include './common/js.html'}}
    <script src="{{base_url}}/js/katelog.min.js"></script>

    <script>
        const app = Vue.createApp({
            data: function () {
                return {
                    drawer: false,
                    total: 10
                }
            },
            mounted() {
                let _this = this;
                document.querySelector('.ico-open').addEventListener('click', () => {
                    _this.drawer = true
                })
            },
            methods: {
                handleCurrentChange(vue) {

                },
                handleClose() {
                    this.drawer = false
                }
            }
        });
        app.use(ElementPlus);
        app.mount('#app');

        const katelogIns = new katelog({
            contentEl: 'article',
            catelogEl: 'article-outline',
            linkClass: 'k-catelog-link',
            linkActiveClass: 'k-catelog-link-active',
            selector: ['h2', 'h3', 'h4', 'h5', 'h6'],
            supplyTop: 20,
            active: function (el) {
            }
        });

    // const html = '<h2>动态添加的标题</h2>'
    // katelogIns.contentEl.insertAdjacentHTML('afterBegin', html);
    // katelogIns.rebuild();
    </script>

</body>

</html>